<template>
  <view class="zm-comment w-full bg-#fff px-[25rpx] p-[20rpx]" :style="{ height: inputWrapHeight }">
    <view
      class="w-full h-[83rpx] rounded-[32rpx] bg-#fafafa flex justify-between items-center px-[25rpx]"
    >
      <input
        v-model="value"
        placeholder="Leave a Comment~"
        placeholder-class="color-#C1C1C1"
        class="flex-1 mr-[20rpx]"
        @focus="onFocus"
        @blur="onBlur"
      />

      <wd-img
        :width="'50rpx'"
        :height="'50rpx'"
        @touchend.prevent="onImageClick"
        src="/static/social/emoji@2x.png"
      />
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const value = ref('')
const inputWrapHeight = ref('0rpx')
const systemInfo = ref({})

const onFocus = () => {
  console.log('Input focused')
}

const onBlur = () => {
  inputWrapHeight.value = '0rpx' // 键盘收起时恢复
}
const onImageClick = () => {
  console.log(333444)
}
onMounted(() => {
  // 获取系统信息
  try {
    // 监听键盘高度变化
    uni.onKeyboardHeightChange((res) => {
      if (res.height > 0) {
        inputWrapHeight.value = `160rpx` // 键盘弹起时调整位置
      } else {
        inputWrapHeight.value = '0rpx' // 键盘收起
      }
    })
  } catch (error) {
    console.error('Failed to get system info:', error)
  }
})

onUnmounted(() => {
  // 移除键盘事件监听
  uni.offKeyboardHeightChange()
})
</script>

<style scoped>
.zm-comment {
  position: fixed;
  bottom: 0;
  left: 0;
  min-height: 120rpx;
}
</style>
